<template>
	<view>
		<view class="nav-wrap">
			<u-scroll-list :indicator="true" indicatorColor="#fff0f0" indicatorActiveColor="#f56c6c">
				   <view v-for="(item, index) in navs" :key="index" @click="goPage(item.url,{})">
					   <div  class="nav-item" :style="{marginLeft:index==0?'0':''}">
						    <image :src="item.icon" style="width:60rpx" mode="widthFix"></image>
							<view style="padding-top:7px;">
								<u--text :block="true" align="center" :text="item.title"></u--text>
							</view>
							
					   </div>
					  
				   </view>
			</u-scroll-list>
		</view>
	</view>
</template>

<script>
	export default {
		name:"index-nav",
		data() {
			return {
				navs:[
					{icon:'../../static/index/1xhtz.png',title:'协会通知',url:'/subpkg/noticeList/noticeList'},
					{icon:'../../static/index/2xhjs.png',title:'协会介绍',url:'/subpkg/jianjie/jianjie'},
					{icon:'../../static/index/3xhxw.png',title:'协会新闻',url:'/subpkg/newsList/newsList'},
					{icon:'../../static/index/4sstd.png',title:'协会团队',url:''},
					
				],
			}
		},
		methods:{
			//路由跳转
			goPage(url,obj){
				uni.$u.route(url,obj);
			},
		}
	}
</script>

<style lang="scss" scoped>
.nav-wrap{padding: 0rpx 10rpx;
			.nav-item{width: 230rpx;margin-left:10rpx; background-color:#fff ;margin-top:10px;height:200rpx;border-radius: 11px; display: flex;flex-direction: column;justify-content: center;align-items: center;
				
			}
		}
		.nav-item  {
			:deep(.u-text){flex:0}
		}
	
		
</style>